<template>
	<view class="u-page__item">
		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, itemIndex) in item" @click="openPhone(cell)">
						<view>
							<u-avatar
								v-if="cell.avatar"
								slot="icon"
								shape="square"
								size="40"
								:src="cell.avatar">
							</u-avatar>
							<u-avatar
								v-else
								:text="cell.userName.slice(1)"
								:fontSize="cell.userName.length > 2?15:18"
								shape="square"
								bgColor="#0087FC">
							</u-avatar>
						</view>
						<view class="text">
							{{cell.userName}}
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
		
		<view>
			<u-action-sheet
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				round="10"
				cancelText="取消"
				@select="sheetClick"
				@close="sheetShow = false"
				:actions="sheetList"
				:title="sheetTitle"
				:show="sheetShow">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import { usersByDept } from '@/api/user'
	export default {
		data() {
			return {
				sheetShow: false,
				sheetTitle: '',
				sheetList: [],
				indexList: [],
				itemArr: [],
				phoneNumber:'',
			}
		},
		onLoad() {
			this.getUserDeptList()
		},
		methods: {
			sheetClick(value){
				if('复制号码' === value.name){
					this.copyInvoice()
					return
				}
				this.doPhone()
			},
			copyInvoice(){
				uni.setClipboardData({
					data: this.phoneNumber, 
					success: () => {
						uni.showToast({
							title: '号码复制成功',
							icon: 'none'
						});
					}
				});
			},
			doPhone(){
				uni.makePhoneCall({
					// 手机号
					phoneNumber:this.phoneNumber,
					// 成功回调
					success() {
						
					},
					// 失败回调
					fail() {
						
					}
				})
			},
			openPhone(cell){
				this.phoneNumber = cell.phonenumber
				this.sheetTitle = '呼叫'+ cell.userName
				this.sheetList = [{name: cell.phonenumber},{name: '复制号码'}]
				this.sheetShow = true
			},
			async getUserDeptList(){
				const { data } = await usersByDept()
				if (data.code == 200) {
					for( var key in  data.data){
						this.itemArr.push(data.data[key])
						this.indexList.push(key)
					}
				}else{
					uni.showToast({
						title: '获取通讯录失败',
						icon: 'none'
					})
				}
			},
			open(e){
				// console.log('e',e)
			},
		}
	}
</script>

<style lang="scss">
.u-page {
	padding: 0;

	&__item {

		&__title {
			 color: $u-tips-color;
			 background-color: $u-bg-color;
			 padding: 15px;
			 font-size: 15px;
	
			&__slot-title {
				 color: $u-primary;
				 font-size: 14px;
			 }
		}
	}
}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	
	.list-cell .text{
		font-size: 32rpx;
		margin-left: 20rpx;
		line-height: 64rpx;
		text-align: center;
	}
</style>